<!-- 店铺服务评价 -->
<template>
    <div v-loading="loading" class="eval-box">
        <h4>全部评价</h4>
        <div>
            <el-row v-for="(item, index) in list" :key="index">
                <el-col :span="5">
                    <div class="eval-h">
                        <h6>{{item.createUserName}}</h6>
                        <i v-if="item.createUserRole !== 'PERSON' && item.userRealStatus === 2" class="icon icon-qy"></i>
                    </div>
                    <div><span>{{item.commnetDate}}</span></div>
                </el-col>
                <el-col :span="19" style="padding-left: 20px;">
                    <p>{{item.commnetBody}}</p>
                    <div>
                        <span>交易金额：{{item.orderTotalPrice}}元</span>
                        <span>质量：{{item.quality}}</span>
                        <span>速度：{{item.speed}}</span>
                        <span>服务：{{item.service}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div v-if="!loading && total === 0" class="no-data">
            <span class="icon icon-no-data">
                <span>暂无评价</span>
            </span>
        </div>
        <div v-if="total > 0" style="text-align: center; padding: 20px 0;">
            <el-pagination
                class="public-page"
                background
                :current-page="search.pageNumber"
                :page-size="search.pageSize"
                :total="total"
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                @current-change="pageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Prop,
    Watch,
    Component
} from 'nuxt-property-decorator'
import {commentListApi} from '~/api/community/article'
@Component({
    name: 'shopEvaluate'
})
export default class ShopEvaluate extends Vue {
    @Prop()
    shopId!: number | string
    loading: boolean = false
    total: number = 0
    list: any = []
    search: any = {
        pageSize: 10,
        pageNumber: 1,
        sourceType: 'SHOP',
        commnetSourceId: ''
    }
    pageChange (val: number) {
        this.search.pageNumber = val
        this.getList()
    }
    async getList () {
        this.loading = true
        const {data}: any = await commentListApi(this.search)
        if (data.flag) {
            this.total = data.data.totalElements
            this.list = data.data.content
        } else {
            this.total = 0
            this.list = []
        }
        this.loading = false
    }
    @Watch('shopId', {immediate: true, deep: true})
    shopIdChange (nv: number | string) {
        if (nv) {
            this.search.commnetSourceId = nv
        }
    }
    mounted () {
        if (this.search.commnetSourceId) {
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
    @mixin word-sign-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .eval-box{
        background-color: #fff;
        border-radius: 6px;
        margin-top: 24px;
        padding: 24px;
        h4{
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }
        h6{
            font-size: 14px;
            color: #333;
            max-width: 180px;
            position: relative;
            display: inline-block;
            @include word-sign-line;
        }
        i.icon{
            position: absolute;
            margin-left: 5px;
            top: 2px;
        }
        .el-row{
            padding: 16px 0;
            border-bottom: 1px solid #f3f5f7;
        }
        .el-col{
            font-size: 14px;
            color: #333;
            line-height: 24px;
            span{
                color: #999;
                font-size: 12px;
                margin-right: 24px;
            }
            .eval-h{
                height: 24px;
            }
            p,
            .eval-h{
                position: relative;
                margin-bottom: 10px;
            }
        }
    }
</style>
